<template>
	<view class="address">
		<view class="address-list" v-for="(item,index) in defaultAddressList" :key="item.addressId">
			<view class="address-content">
				<!-- :style="{borderBottom:index==defaultAddressList.length-1?'none':'1rpx solid #f2f2f2'}" -->
				<view class="address-title">
					<uni-tag class="address-tag" v-show="item.isDefault" text="默认" type="success" inverted
						size="mini" />
					<text>{{item.address}}</text>
				</view>
				<view class="address-note">
					<text class="address-note1">{{item.addressName}}</text>
					<text class="address-note2">{{item.addressPhone}}</text>
				</view>
				<view class="address-icon">
					<uni-icons class="icon-compose" type="compose" :size="28" color="#79e9ff"
						@click="handleToEdit(item.addressId)">
					</uni-icons>
					<uni-icons type="minus" :size="28" color="red" @click="handleToDel(item.addressId)"></uni-icons>
				</view>
			</view>
		</view>
		<button class="btn-submit" @click="handleToAdd">添加收货地址</button>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import addressApi from '../../api/avatar/avatar.js'
	export default {
		data() {
			return {}
		},
		computed: {
			...mapGetters('address', ['defaultAddressList']),
		},
		onLoad() {
			this.setAddressList()
		},
		methods: {
			...mapActions('address', ['setAddressList']),
			handleToEdit(id) {
				uni.navigateTo({
					url: '/pages/avatar/editAddress?addressId=' + id
				})
			},
			handleToAdd() {
				uni.navigateTo({
					url: '/pages/avatar/addAddress'
				})
			},
			// 删除
			async handleToDel(addressId) {
				const res = await addressApi.delAddress({
					addressId
				})
				if (res.code == 200) {
					this.setAddressList()
					uni.showToast({
						title: '删除成功'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		height: calc(100vh - 90rpx);
		width: 750rpx;
		background-color: #fdfffc;

		.address-list {
			padding: 15rpx 20rpx 0 20rpx;
			background-color: #fff;

			.address-content {
				position: relative;
				border-bottom: 1rpx solid #f2f2f2;

				.address-title {
					font-size: 32rpx;
					margin-bottom: 20rpx;

					.address-tag {
						margin-right: 15rpx;
					}
				}

				.address-note {
					font-size: 26rpx;
					color: gray;
					margin-left: 10rpx;

					.address-note1 {
						display: inline-block;
						margin-right: 20rpx;
					}
				}

				.address-icon {
					position: absolute;
					top: 0rpx;
					right: 20rpx;
					display: flex;
					flex-direction: column;

					.icon-compose {
						margin-bottom: 10rpx;
					}
				}
			}


		}

		.btn-submit {
			width: 750rpx;
			position: fixed;
			bottom: 0rpx;
			background-color: #aaff7f;
			color: white;
		}
	}
</style>